import React, { Component } from 'react'
import { Menu, Button } from 'antd'
import { AppstoreOutlined } from '@ant-design/icons'
const { SubMenu } = Menu

export default class menu extends Component {
  state = {
    collapsed: false,
  }

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    })
  }
  // 菜单
  menuList = [
    {
      title: '仪表盘',
      key: 'panel',
      icon: '',
      children: [
        {
          title: '集团',
          key: 'group',
          icon: '',
          children: [
            {
              title: '集团1',
              key: 'aaaaa',
              icon: '',
              path: ''
            }
          ]
        },
        {
          title: '信托',
          key: 'trust',
          icon: '',
          path: ''
        }
      ]
    },
    {
      title: '数据标注',
      key: 'data_type',
      icon: '',
      children: [
        {
          title: '集团',
          key: 'bbbb',
          icon: '',
          path: ''
        },
        {
          title: '信托',
          key: 'cccc',
          icon: '',
          path: ''
        }
      ]
    },
    {
      title: '数据治理知识库',
      key: 'knowledge_base',
      icon: '',
    }
  ]
  createMune = (target) => {
    return target.map((item)=>{
      if(!item.children){
        return (
          <Menu.Item key={item.key}>{item.title}</Menu.Item>
        )
      } else {
        return (<SubMenu key={item.key} icon={<AppstoreOutlined />} title={item.title} >
          {
            this.createMune(item.children)
          }
        </SubMenu>)
      }
    })
  }
  render() {
    return (
      <div>
        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          inlineCollapsed={this.state.collapsed}
        >
          {
            this.createMune(this.menuList)
          }

        </Menu>
      </div>
    )
  }
}
